<template>
  <div class="hello" :style="'height:'+height+';width:100%'">
      <audio id="player" src="http://the-store-bucket.oss-cn-shanghai.aliyuncs.com/A-Lin%20-%20现在我很幸福.mp3" autoplay controls>
      </audio>
      <br>
      <div class="c">
          <div class="tc font30 mb15">{{g}}</div>
      </div>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      g:'',
      gd:{
        up:null,
        down:null
      },
      p:null,
      lrc:"[00:00.00] 作曲 : 高进\n[00:01.00] 作词 : 高进\n[00:12.56]我们哭了\n[00:15.27]我们笑着\n[00:18.60]我们抬头望天空\n[00:21.43]星星还亮着几颗\n[00:24.63]我们唱着\n[00:27.56]时间的歌\n[00:30.62]才懂得相互拥抱\n[00:34.00]到底是为了什么\n[00:36.94]因为我刚好遇见你\n[00:40.32]留下足迹才美丽\n[00:43.69]风吹花落泪如雨\n[00:46.48]因为不想分离\n[00:49.57]因为刚好遇见你\n[00:52.59]留下十年的期许\n[00:55.69]如果再相遇\n[00:59.15]我想我会记得你\n[01:14.28]我们哭了\n[01:16.88]我们笑着\n[01:20.29]我们抬头望天空\n[01:22.96]星星还亮着几颗\n[01:26.11]我们唱着\n[01:29.11]时间的歌\n[01:32.56]才懂得相互拥抱\n[01:35.36]到底是为了什么\n[01:38.47]因为我刚好遇见你\n[01:41.84]留下足迹才美丽\n[01:44.83]风吹花落泪如雨\n[01:47.97]因为不想分离\n[01:51.02]因为刚好遇见你\n[01:54.09]留下十年的期许\n[01:57.23]如果再相遇\n[02:00.69]我想我会记得你\n[02:03.69]因为刚好遇见你\n[02:06.43]留下足迹才美丽\n[02:09.57]风吹花落泪如雨\n[02:12.64]因为不想分离\n[02:15.76]因为刚好遇见你\n[02:18.78]留下十年的期许\n[02:21.83]如果再相遇\n[02:24.98]我想我会记得你\n[02:31.07]因为我刚好遇见你\n[02:34.13]留下足迹才美丽\n[02:37.25]风吹花落泪如雨\n[02:40.37]因为不想分离\n[02:43.43]因为刚好遇见你\n[02:46.48]留下十年的期许\n[02:49.58]如果再相遇\n[02:52.67]我想我会记得你\n",
      lrcObj:null,
      height:'auto',
      array:[
            {
                "ti":"回家的路"
            },
            {
                "ar":"大欢"
            },
            {
                "al":"回家的路"
            },
            {
                "by":""
            },
            {
                "offset":"0"
            },
            {
                "00:00.00":"回家的路 - 大欢"
            },
            {
                "00:02.75":"词：赵铁志"
            },
            {
                "00:05.50":"曲：赵铁志"
            },
            {
                "00:08.25":"编曲：刘文"
            },
            {
                "00:11.00":"和声：李艺皓"
            },
            {
                "00:13.76":"混音：鍾澤鑫"
            },
            {
                "00:16.51":"制作人：杨栋栋"
            },
            {
                "00:19.26":"OP：乐巢唱片（Solo Music One）"
            },
            {
                "00:22.01":"又是那个滴露的日出"
            },
            {
                "00:26.37":"我闻着那芳香的泥土"
            },
            {
                "00:30.80":"阿爸走在前方的脚步"
            },
            {
                "00:34.98":"领着我走出泥泞旅途"
            },
            {
                "00:39.23":"又是那个温暖的日暮"
            },
            {
                "00:43.52":"我听着那溪水在倾诉"
            },
            {
                "00:47.75":"阿妈种在村边的小树"
            },
            {
                "00:52.05":"呼唤我走向炊烟老屋"
            },
            {
                "00:56.40":"这是一条熟悉的路"
            },
            {
                "00:59.81":"走过了多少寂寞辛苦"
            },
            {
                "01:04.04":"当年离家时记下殷殷双目"
            },
            {
                "01:08.36":"在梦里我想着忍住不哭"
            },
            {
                "01:12.81":"就是这条回家的路"
            },
            {
                "01:17.02":"刻下了多少岁月匆促"
            },
            {
                "01:21.13":"如今相逢时我的沉沉脚步"
            },
            {
                "01:25.61":"在风里想对你说尽孤独"
            },
            {
                "01:47.71":"又是那个温暖的日暮"
            },
            {
                "01:52.04":"我听着那溪水在倾诉"
            },
            {
                "01:56.32":"阿妈种在村边的小树"
            },
            {
                "02:00.55":"呼唤我走向炊烟老屋"
            },
            {
                "02:04.84":"这是一条熟悉的路"
            },
            {
                "02:08.30":"走过了多少寂寞辛苦"
            },
            {
                "02:12.67":"当年离家时记下殷殷双目"
            },
            {
                "02:17.04":"在梦里我想着忍住不哭"
            },
            {
                "02:21.44":"就是这条回家的路"
            },
            {
                "02:25.51":"刻下了多少岁月匆促"
            },
            {
                "02:29.82":"如今相逢时我的沉沉脚步"
            },
            {
                "02:34.22":"在风里想对你说尽孤独"
            },
            {
                "02:38.31":"这是一条回家的路"
            },
            {
                "02:42.77":"走过了多少寂寞辛苦"
            },
            {
                "02:46.97":"当年离家时记下殷殷双目"
            },
            {
                "02:51.32":"在梦里我想着忍住不哭"
            },
            {
                "02:55.68":"就是这条回家的路"
            },
            {
                "02:59.90":"刻下了多少岁月匆促"
            },
            {
                "03:04.16":"如今相逢时我的沉沉脚步"
            },
            {
                "03:08.53":"在风里想对你说尽孤独"
            }
        ]
    }
  },
  mounted(){
      this.test()
    this.p = document.querySelector("#player")
    let _this = this;
    this.lrcObj = this.jx();
    // console.log(this.lrcObj);
    // console.log(this.p)
    this.p.addEventListener("timeupdate",function(){
        //console.log('8888')
      let obj = _this.lrcObj[Math.floor(this.currentTime)];
      if(obj!=undefined){
        _this.g = obj;
      }
    });
    this.height =window.innerHeight+'px'
    window.onresize  = ()=>{
      _this.height =window.innerHeight+'px'
    }
  },
  methods:{
    test(){
        console.log(this.array)
        var array=[]
        var timeReg = /\"\d*:\d*((\.|\:)\d*)*\"/g;
        for(var i=0;i<this.array.length;i++){
            var index=Object.keys(this.array[i]).indexOf(':')
            if(index!=-1){
                //this.array.splice(i,1)
                array.push(this.array[i])
            }
        }
        console.log(array)
        //   var array=JSON.stringify(this.array)
        //   var lyrics = this.lrc.split("}");
        //     var lrcObj = {};
        //     for(var i=0;i<lyrics.length;i++){
        //         var lyric = decodeURIComponent(lyrics[i]);
        //         var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;
        //         var timeRegExpArr = lyric.match(timeReg);
        //         if(!timeRegExpArr)continue;
        //         var clause = lyric.replace(timeReg,'');
        //         for(var k = 0,h = timeRegExpArr.length;k < h;k++) {
        //             var t = timeRegExpArr[k];
        //             var min = Number(String(t.match(/\[\d*/i)).slice(1)),
        //                 sec = Number(String(t.match(/\:\d*/i)).slice(1));
        //             var time = min * 60 + sec;
        //             lrcObj[time] = clause;
        //         }
        //     }
        //     return lrcObj;
    },
    jx(){
      var lyrics = this.lrc.split("\n");
      var lrcObj = {};
      //console.log(lyrics)
      for(var i=0;i<lyrics.length;i++){
          var lyric = decodeURIComponent(lyrics[i]);
          var timeReg = /\[\d*:\d*((\.|\:)\d*)*\]/g;
          var timeRegExpArr = lyric.match(timeReg);
          if(!timeRegExpArr)continue;
          var clause = lyric.replace(timeReg,'');
          for(var k = 0,h = timeRegExpArr.length;k < h;k++) {
              var t = timeRegExpArr[k];
              var min = Number(String(t.match(/\[\d*/i)).slice(1)),
                  sec = Number(String(t.match(/\:\d*/i)).slice(1));
              var time = min * 60 + sec;
              lrcObj[time] = clause;
          }
      }
      return lrcObj;
    }
  }
 
}
</script>
<style>
.hello{
    background-color: blueviolet;
  /* background-image: url("../assets/by.jpg") */
}
.c{
  color: #927712;
}
.tc{
  text-align: center;
  margin:0 auto;
}
.mb15{
  margin-bottom: 15px;
}
.font40{
  font-size: 0.24rem;
}
.font30{
  font-size: 0.20rem;
}
</style>